<template>
<view class="page taskDetail">
    <view class="fcenter orderInfo">
        <view class="flex">订单剩余时间&nbsp;&nbsp;<nut-countdown :end-time="countDown" @on-end="orderEnd"></nut-countdown></view>
        <view class="money">￥<text class="amt">{{ activityInfo.activity_sing_money }}</text></view>
        <text>{{ activityInfo.main_package }}</text>
    </view>
    <!-- <view class="box between info">
        <view class="info_left">
            <view class="title flex ell">
                <cdn-img src="/static/img/yj.png" class="typeImg" v-if="activityInfo.type==1"/>
                <cdn-img src="/static/img/st.png" class="typeImg" v-else-if="activityInfo.type==2"/>
                <cdn-img src="/static/img/zh.png" class="typeImg" v-else-if="activityInfo.type==3"/>
                <cdn-img src="/static/img/shoot.png" class="typeImg" v-else/>
                <text class="text">{{ activityInfo.title }}</text>
            </view>
            <view class="tagGroup">
                <view class="lv">
                    <cdn-img src="/static/img/star/box.png" class="lv_bg" />
                    <view class="type fcenter">娱乐</view>
                    <view class="lv_num fcenter">等级LV{{ activityInfo.start_level }}</view>
                </view>
                <view class="tag fcenter orange">粉丝≥<text v-if="activityInfo.award_rule&&activityInfo.award_rule.length>0">{{ transFans(activityInfo.award_rule[0].fans_num) }}</text></view>
            </view>
        </view>
        <cdn-img :src="activityInfo.pic" class="pic"/>
    </view> -->
    <TaskCardStar v-if="user.mode===1" :item="activityInfo" :type="2"></TaskCardStar>
    <TaskCard v-else :item="activityInfo" :type="2"></TaskCard>
    <view class="box taskBox flex">
        <view class="left_tit">
            <view>任务时间</view>
            <!-- <view>发布时间</view> -->
            <view>主推套餐</view>
        </view>
        <view class="right_con">
            <view>{{activityInfo.start_time}}至{{activityInfo.end_time}}</view>
            <view>{{ activityInfo.main_package }}</view>
        </view>
    </view>
    <view class="box">
        <view class="h1"><view class="flag"></view>完成方式</view>
        <view class="row">领取任务后{{activityInfo.time_int}}个小时内需达成</view>
        <!-- <view class="row">播放量≥1000&emsp;&emsp;点赞数≥100&emsp;&emsp;评论数≥10</view> -->
    </view>
    <view class="box taskBox">
        <view class="h1"><view class="flag"></view>订单详情</view>
        <view class="flex">
            <view class="left_tit">
                <view>缴费事项</view>
                <view>订单金额</view>
                <view>订单时间</view>
                <view>活动ID</view>
            </view>
            <view class="right_con">
                <view>报名费缴纳</view>
                <view>￥{{ activityInfo.activity_sing_money }}</view>
                <view>2022-11-18 15:53:50</view>
                <view>{{ activityInfo.id }}</view>
            </view>
        </view>
    </view>
    <view class="title2">支付方式</view>
    <view class="box payWay between">
        <view class="fcenter">
            <cdn-img src="/static/img/wechat.png" class="wechat"/>
            <text>微信支付</text>
        </view>
        <nut-checkbox v-model="checkbox"></nut-checkbox>
    </view>
    <view class="box notice">
        <view class="type">温馨提示：</view>
        <view>报名费将在任务完成后或任务失败时候原路退回，若在{{activityInfo.time_int}}小时内未上传视频，则不予退还。</view>
    </view>
    <view class="fixedBottom between">
        <view class="total">合计：<text class="amt">￥{{ activityInfo.activity_sing_money }}</text></view>
        <view class="btn-gray bot fcenter" v-if="isEnd">已关闭</view>
        <view class="btn-blue4 bot fcenter" @click="openPayment" v-else>立即支付</view>
    </view>
</view>
</template>

<script setup>
import TaskCard from '@/components/TaskCard'
import TaskCardStar from "@/components/TaskCardStar";
import { ref, onBeforeMount, onBeforeUnmount } from 'vue'
import { useUserStore, useOrderStore } from "@/stores";
import { requestPayment, showToast } from '@tarojs/taro'
import { switchTab } from '@/router'
import { storeToRefs } from 'pinia';
// import { transFans } from '@/utils/helper'
import "./index.scss";

const user = useUserStore()
const order = useOrderStore();
const { activityInfo } = storeToRefs(order);
const checkbox = ref(true);
const countDown = ref(0);
const isEnd = ref(false);
let payData = null;

// 调起微信支付
function openPayment(){
    if(!checkbox.value) return showToast({ title: '您还未选择支付方式', icon: 'none', duration: 3000})
    requestPayment({
        ...payData,
        success:()=> {
			// 支付成功报名成功
            // 云剪和纯佣切换到进行中的任务，其他切换到等待中的任务
            order.setActiveTab([1,5].indexOf(activityInfo.value.type)>-1?1:0);
            showToast({title: '报名成功', icon: 'success', duration: 2000})
            setTimeout(()=> switchTab({url: '/pages/task/index'}), 2000)
        },
        fail:(err)=> {
            console.log('fail:' + JSON.stringify(err));
        }
    });
}
function orderEnd(){
    isEnd.value = true
}

onBeforeMount(()=>{
    // 进入页面创建报名订单
    const parame = {id: activityInfo.value.id}
    if(activityInfo.value.order_id) parame.order_id = activityInfo.value.order_id
    order.CreatApplyOrder(parame).then(data=>{ 
        const orderCreateTime = (activityInfo.value.order_create?new Date(activityInfo.value.order_create.replace(/-/g,'/')):new Date(data.created_at.replace(/-/g,'/')))
        countDown.value = orderCreateTime.getTime()+1800000;
        if(Date.now()-countDown.value<0){
            isEnd.value = false
        }
        if(data.config){
            payData = data.config
        }
    })
})
onBeforeUnmount(()=>{
    // 移除store内的活动数据
    order.setCreateBeforeAct(null)
})
</script>